/**
 * 目标1：设置频道下拉菜单
 *  1.1 获取频道列表数据
 *  1.2 展示到下拉菜单中
 */
// 封装请求频道列表函数
async function setChannelList() {
  const result = await axios({ url: '/v1_0/channels'})
  const list = result.data.channels.map(item => {
    return `
    <option value="${item.id}">${item.name}</option>
    `
  }).join('')
  document.querySelector('.form-select').innerHTML = '<option value="" selected>请选择文章频道</option>' + list
}
setChannelList()
/**
 * 目标2：文章封面设置
 *  2.1 准备标签结构和样式
 *  2.2 选择文件并保存在 FormData
 *  2.3 单独上传图片并得到图片 URL 网址
 *  2.4 回显并切换 img 标签展示（隐藏 + 号上传标签）
 */
// 获取图片对象
const roun = document.querySelector('.rounded')
document.querySelector('.img-file').addEventListener('change', async e => {
  // 获取图片
  const file = e.target.files[0]
  // 创建fromdata对象
  const fb = new FormData()
  fb.append('image',file) //携带
  const imgs = await axios({ url: '/v1_0/upload', method: 'POST', data: fb })
  console.log(imgs);
  // 更换图片路径
  roun.src = imgs.data.url
  document.querySelector('.place').classList.add('hide')
  roun.classList.add('show')
})
// 点击图片触发input事件
roun.addEventListener('click',() => {
  document.querySelector('.img-file').click()
})
/**
 * 目标3：发布文章保存
 *  3.1 基于 form-serialize 插件收集表单数据对象
 *  3.2 基于 axios 提交到服务器保存
 *  3.3 调用 Alert 警告框反馈结果给用户
 *  3.4 重置表单并跳转到列表页
 */
document.querySelector('.send').addEventListener('click', async () => {
    // 判断有没有 id 区分业务
  if (document.querySelector('[name="id"]').value) return
  const from = document.querySelector('.art-form')
  const fromData = serialize(from, { hash: true, empiy: true})
  fromData.cover = {
    type: 1,
    images: [roun.src]
  }
    const res = await axios({
      url: '/v1_0/mp/articles',
      method: 'POST',
      data: fromData
    })
    console.log(fromData.channel_id);
    // 3.3 调用 Alert 警告框反馈结果给用户
    myAlert(true, '发布成功')
    // 清空表单数据
    from.reset()
    roun.src = ''
    roun.classList.remove('show')
    document.querySelector('.place').classList.remove('hide')
    // 富文本编辑器清空
    editor.setHtml('')
    // 跳转页面
    setTimeout(() => {
      location.href = '../content/index.html'
    },1500)
})

/**
 * 目标4：编辑-回显文章
 *  4.1 页面跳转传参（URL 查询参数方式）
 *  4.2 发布文章页面接收参数判断（共用同一套表单）
 *  4.3 修改标题和按钮文字
 *  4.4 获取文章详情数据并回显表单
 */
// console.log(localStorage.getItem('id'));

;(function () {
  const paramStr = location.search
  const params = new URLSearchParams(paramStr)
  params.forEach((value, key) => {
    if (key === 'id') {
      document.querySelector('.title').innerHTML = `<span>编辑文章</span>`
      document.querySelector('.send').innerHTML = `修改`
      // console.log(value);
      // 请求数据
      axios({
        url: `v1_0/mp/articles/${value}`, 
      }).then(result => {
        // 回显
        document.querySelector('.form-control').value = result.data.title
        document.querySelector('.form-select').value = result.data.channel_id
        if (result.data.cover.images) {
          document.querySelector('.place').classList.add('hide')
          document.querySelector('.rounded').classList.add('show')
          document.querySelector('.rounded').src = result.data.cover.images
        }
        // 富文本编辑器
        editor.setHtml(result.data.content)
        document.querySelector('.publish-content').value = result.data.content
        document.querySelector('[name="id"]').value = result.data.id
      })
    }
  })
})()

/**
 * 目标5：编辑-保存文章
 *  5.1 判断按钮文字，区分业务（因为共用一套表单）
 *  5.2 调用编辑文章接口，保存信息到服务器
 *  5.3 基于 Alert 反馈结果消息给用户
 */
document.querySelector('.send').addEventListener('click', async () => {
  // 判断有没有 id 区分业务
  if (document.querySelector('[name="id"]').value) {
    const from = document.querySelector('.art-form')
    const fromData = serialize(from, { hash: true, empiy: true})
    fromData.cover = {
      type: 1,
      images: [roun.src]
    } 
    const res = await axios({
      url: `/v1_0/mp/articles/${document.querySelector('[name="id"]').value}`,
      method: 'PUT',
      data: fromData
    })
    alert('修改成功')
    // 1.5秒后跳转页面
    setTimeout(() => {
      location.href = '../content/index.html'
    }, 1500)
  }
})